<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="m1280 account">Deactive your account</div>
		<div class="setl m1280 f">
			<div class="left">
				<div :class="{ avtive: ind == 1 }" @click="qie(1)" class="hand top f f-a-c">1.select acocunt</div>
				<div :class="{ avtive: ind == 2 }" @click="qie(2)" class="top hand f f-a-c">2.Select reason</div>
				<div :class="{ avtive: ind == 3 }" @click="qie(3)" class="top hand f f-a-c">3.Confirm</div>
				<div :class="{ avtive: ind == 4 }" @click="qie(4)" class="top hand f f-a-c">4.Done</div>
			</div>
			<div class="right">
				<div v-show="ind == 1" class="one">
					<div @click="setls = 1" class="oneTop f f-a-c">
						<div class="imgBox hand">
							<img src="/src/assets/user/gou.png" v-if="setls == 1" alt="" />
							<img src="/src/assets/user/weigou.png" v-else alt="" />
						</div>
						<div class="tit hand">Xpert</div>
					</div>
					<div @click="setls = 2" class="oneTop f f-a-c">
						<div class="imgBox hand">
							<img src="/src/assets/user/gou.png" v-if="setls == 2" alt="" />
							<img src="/src/assets/user/weigou.png" v-else alt="" />
						</div>
						<div class="tit hand">KnowClub</div>
					</div>
					<div @click="continu(1)" class="continue hand">Continue</div>
				</div>
				<!-- 第二部 -->
				<div v-show="ind == 2" class="tow">
					<div class="count">What prompted you to deactivate?</div>
					<div @click="setlsTow = 1" class="oneTop f f-a-c">
						<div class="imgBox hand">
							<img src="/src/assets/user/gou.png" v-if="setlsTow == 1" alt="" />
							<img src="/src/assets/user/weigou.png" v-else alt="" />
						</div>
						<div class="tit hand">terms: I have safety or privacy concerns.I can't comply with Xpert's Terms of Service / Community Commitment.</div>
					</div>
					<div @click="setlsTow = 2" class="oneTop f f-a-c">
						<div class="imgBox hand">
							<img src="/src/assets/user/gou.png" v-if="setlsTow == 2" alt="" />
							<img src="/src/assets/user/weigou.png" v-else alt="" />
						</div>
						<div class="tit hand">buyer quality/business /product: This business doesnt fit me</div>
					</div>
					<div @click="setlsTow = 3" class="oneTop f f-a-c">
						<div class="imgBox hand">
							<img src="/src/assets/user/gou.png" v-if="setlsTow == 3" alt="" />
							<img src="/src/assets/user/weigou.png" v-else alt="" />
						</div>
						<div class="tit hand">moeny: I don’t have orders.</div>
					</div>
					<div @click="setlsTow = 4" class="oneTop f f-a-c">
						<div class="imgBox hand">
							<img src="/src/assets/user/gou.png" v-if="setlsTow == 4" alt="" />
							<img src="/src/assets/user/weigou.png" v-else alt="" />
						</div>
						<div class="tit hand">business model: not enough time or im busy with my business</div>
					</div>
					<div @click="setlsTow = 5" class="oneTop f f-a-c">
						<div class="imgBox hand">
							<img src="/src/assets/user/gou.png" v-if="setlsTow == 5" alt="" />
							<img src="/src/assets/user/weigou.png" v-else alt="" />
						</div>
						<div class="tit hand">Other(explain)</div>
					</div>
					<!-- 下面的按钮 -->
					<div class="back f f-a-c">
						<div @click="back(1)" class="hand lef f f-a-c"><img src="/src/assets/user/back.png" alt="" />Back</div>
						<div @click="continu(2)" class="btn hand">Continue</div>
					</div>
				</div>
				<!-- 第三步 -->
				<div v-show="ind == 3" class="tow">
					<div class="count">What prompted you to deactivate?</div>
					<div class="url">vffeii5467889@gmail.com</div>
					<div class="tidhi f f-a-c">
						<div class="tishiCon"><img src="/src/assets/user/tishi.png" alt="" /></div>
						<div class="nei">The profile and listings associated with this account will disappear.</div>
					</div>
					<div class="tidhi f f-a-c">
						<div class="tishiCon"><img src="/src/assets/user/tishi.png" alt="" /></div>
						<div class="nei">You won’t be able to access the account info or past reservations.</div>
					</div>
					<!-- 下面的按钮 -->
					<div class="back f f-a-c">
						<div @click="back(2)" class="hand lef f f-a-c"><img src="/src/assets/user/back.png" alt="" />Back</div>
						<div @click="continu(3)" class="btn hand">Continue</div>
					</div>
				</div>
				<!-- 第四步 -->
				<div v-show="ind == 4" class="four">
					<div class="topImg"><img src="/src/assets/user/xiao.png" alt="" />Success</div>
					<div class="have">You have successfully deleted your account!</div>
					<div class="keep">We keep data for 30days. When you return, access to all history, otherwise deleted permanently.</div>
					<div class="btn f f-a-c">
						<div class="lefBtn hand">Done</div>
						<div class="rigBtn hand">Reactivate my acocunt</div>
					</div>
				</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let ind = ref(1);
	let setls = ref(1);
	let setlsTow = ref(1);
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	// /点击下一步
	const continu = num => {
		ind.value = num + 1;
	};

	// 切换
	const qie = e => {
		ind.value = e;
	};
	// 返回上一步
	const back = num => {
		// 第一个返回
		if (num == 1) {
			ind.value = 1;
			setlsTow.value = 1;
		} else if (num == 2) {
			ind.value = 1;
		}
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
